<template>
  <div class="app-container">
    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body>
      <el-container :direction="'vertical'">
        <el-main>
          <el-steps :active="active" finish-status="success">
            <el-step title="第一步" description="上传视频" icon="el-icon-upload"/>
            <el-step title="第二步" description="选择审核方式" icon="el-icon-edit"/>
            <el-step title="第三步" description="视频审核中" icon="el-icon-attract"/>
          </el-steps>
        </el-main>

        <el-main>
          <div class="step-content">
            <!-- 步骤内容 -->
            <div v-if="active === 0" class="centered-content">
              <!-- 上传视频步骤 -->
<!--              <FileUpload v-model="formData.videoPath" :limit="1"/>-->
              <VideoFileUpload v-model="formData.videoPath" :limit="1"/>
            </div>

            <div v-if="active === 1" class="centered-content">
              <!-- 选择审核方式步骤 -->
              <p>此处是选择审核方式的内容。</p>
            </div>

            <div v-if="active === 2" class="centered-content">
              <!-- 视频审核中步骤 -->
              <p>此处是视频审核中的内容。</p>
              <VideoPreview video-src="" />
            </div>
          </div>
        </el-main>
        <el-main>
          <el-button :disabled="previousDisabled" style="margin-top: 12px;" @click="previous">上一步</el-button>
          <el-button :disabled="nextDisabled" style="margin-top: 12px;" @click="next">下一步</el-button>
        </el-main>
      </el-container>
    </el-dialog>
  </div>
</template>

<script>
import VideoRecordForm from "@/views/audit/videoinfo/components/VideoRecordForm.vue";
import FileUpload from "@/components/FileUpload/index.vue";
import VideoPreview from "@/views/audit/components/VideoPreview.vue";
import VideoFileUpload from "@/views/audit/components/VideoFileUpload.vue";


export default {
  name: "UploadVideoFile",
  components: {VideoPreview, FileUpload, VideoRecordForm, VideoFileUpload},
  data() {
    return {
      active: 0,
      nextDisabled: false,
      previousDisabled: true,
      // 弹出层标题
      dialogTitle: "",
      // 是否显示弹出层
      dialogVisible: false,
      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
      formLoading: false,
      // 表单参数
      formData: {
        id: undefined,
        videoPath: undefined,
        videoName: undefined,
        videoSize: undefined,
        videoDuration: undefined,
        videoResolution: undefined,
      },
      // 表单校验
      formRules: {
        videoPath: [{required: true, message: '视频路径不能为空', trigger: 'blur'}],
        videoName: [{required: true, message: '视频名称不能为空', trigger: 'blur'}],
        videoSize: [{required: true, message: '视频大小不能为空', trigger: 'blur'}],
        videoDuration: [{required: true, message: '视频时长（s）不能为空', trigger: 'blur'}],
        videoResolution: [{required: true, message: '视频分辨率不能为空', trigger: 'change'}],
      },
    };
  },
  methods: {
    /** 打开弹窗 */
    async open(id) {
      this.active = 0;
      this.nextDisabled = false;
      this.dialogVisible = true;
      this.title = "新增视频信息";
    },
    next() {
      if (++this.active > 1) {
        this.nextDisabled = true;
      } else {
        this.previousDisabled = false;
      }
    },
    previous() {
      if (--this.active < 1) {
        this.previousDisabled = true;
      } else {
        this.nextDisabled = false;
      }
    }
  }
};
</script>

<style scoped>
.step-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* 根据实际需要调整高度 */
}

.centered-content {
  text-align: center;
}

</style>
